import { defineStore } from "pinia";
import {
  computed,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRaw,
  watch,
} from "vue";
import { useQuasar, uid } from "quasar";
import { date } from "quasar";

import { useSettings } from "../settings/settings-store";

export const useTodo = defineStore("todos", {
  // 为了完整类型推理，推荐使用箭头函数
  state: () => {
    const $q = useQuasar();
    const settings = useSettings();

    function 高亮搜索(搜索范围, 关键词) {
      if (关键词) {
        const reg = new RegExp(关键词, "ig");
        return 搜索范围.replace(reg, (match) => {
          return `<span class="bg-yellow-6">${match}</span>`;
        });
      }
      return 搜索范围;
    }

    function niceday(day) {
      // console.log(`day👉`,day)
      // 可以是字符串 2024-03-28
      // const formattedString = date.formatDate(day, 'YY MMM D')
      const formattedString = date.formatDate(day, "MMM D");

      // 也可以是时间戳
      // const timeStamp = Date.now();
      // console.log(`timeStamp👉`,timeStamp)
      // const formattedString = date.formatDate(timeStamp, "MMM D");

      return formattedString;
    }

    function nicetime(time) {
      console.log(`nicetime执行了👉`);
      if (settings.data.todo.十二小时制) {
        let formattedString = date.formatDate(`2000-01-01 ${time}`, "Ah:mm");
        formattedString = formattedString.replace("AM", "上午");
        formattedString = formattedString.replace("PM", "下午");
        return formattedString;
      }
      return time;
    }

    const todos = reactive([
      {
        id: 1,
        名称: "吃饭",
        完成: false,
        到期日期: "2024-03-28",
        到期时间: "09:00",
      },
      {
        id: 2,
        名称: "吃饭",
        完成: false,
        到期日期: "2024-03-28",
        到期时间: "09:00",
      },
    ]);

    const todos排序 = computed(() => {
      // console.log(`todos过滤执行了👉`)
      let todos过滤 = todos.filter((item) => {
        // console.log(`关键词.value👉`,关键词.value)
        // 关键词为空的时候会匹配任意内容
        let 匹配 = new RegExp(关键词.value, "i").test(item.名称);
        // console.log(`匹配？👉`,匹配)

        // 这种方式不能把aa作为变量传递进去
        // const reg = /aa/i;
        // reg.test("kaab");

        return 匹配;
      });

      // console.log(`todos排序执行了👉`)
      const todos_ = todos过滤;
      // 按名称排序
      // console.log(`排序字段变化了👉`,排序字段.value)
      // console.log(`倒序变化了👉`,倒序.value)

      // todos_.sort((a, b) => a[排序字段.value].localeCompare(b[排序字段.value]));

      todos_.sort((a, b) => {
        if (排序字段.value == "时间") {
          const timestampA = new Date(`${a.到期日期} ${a.到期时间}`).getTime();
          const timestampB = new Date(`${b.到期日期} ${b.到期时间}`).getTime();
          // return timestampA.localeCompare(timestampB)
          return timestampA - timestampB;
        } else {
          // console.log(`排序字段.value👉`,排序字段.value)
          return a[排序字段.value].localeCompare(b[排序字段.value]);
        }
      });

      // 如果需要倒序排序，可以使用下面这行代码
      if (倒序.value) {
        // console.log(`倒序ing👉`)
        todos_.reverse();
      }
      todos_.reverse();

      return todos_;
    });

    // watch(todos排序, () => {
    //   console.log(`todos排序变化了👉`)
    // });

    const todos_未完成 = computed(() => {
      // console.log(`todos_未完成执行了👉`)

      let kk = todos排序.value.filter((item) => item.完成 != true);
      return kk;
    });

    const todos_已完成 = computed(() => {
      let kk = todos排序.value.filter((item) => item.完成 == true);
      return kk;
    });

    const todo_模板 = {
      id: "",
      名称: "吃饭",
      完成: false,
      到期日期: date.formatDate(Date.now(), "YYYY/MM/DD"),
      到期时间: date.formatDate(Date.now(), "HH:mm"),
    };

    const todo = reactive({});

    function save1() {
      // console.log(`todo👉`, todo);
      // console.log(`toRaw(todo)👉`,toRaw(todo))
      // console.log(toRaw(todo)===todo);
      // todos.unshift(toRaw(todo))
      if (todo.id) {
        const todo_ = todos.find((item) => item.id === todo.id);
        Object.assign(todo_, { ...todo });
      } else {
        // todos.unshift(JSON.parse(JSON.stringify(todo)))
        todo.id = uid();
        todos.unshift({ ...todo });
      }
      显示详情.value = false;
    }

    function add1() {
      Object.assign(todo, { ...todo_模板 });
      显示详情.value = true;
    }

    const 显示详情 = ref(false);
    const 关键词 = ref("");
    const 排序字段 = ref("时间");
    const 排序字段列表 = reactive(["名称", "时间"]);
    const 倒序 = ref(true);

    function edit1(id) {
      // console.log(`edit1 id👉`,id)
      const todo_ = todos.find((item) => item.id === id);
      // console.log(`todo_👉`,todo_)
      // const i = todos.findIndex((item) => item.id == id);
      // todo={...atodo} //Uncaught TypeError: Assignment to constant variable
      Object.assign(todo, todo_);
      显示详情.value = true;
    }

    function delete1(id) {
      $q.dialog({
        title: "确认",
        message: "确认删除吗？",
        cancel: true,
      })
        .onOk(() => {
          // console.log('>>>> OK')
          const i = todos.findIndex((item) => item.id == id);
          // console.log("i", i);
          todos.splice(i, 1);
          // 保存数据();
        })
        .onCancel(() => {
          console.log(">>>> Cancel");
        });
    }

    function 保存数据s() {
      // console.log("保存todos", todos);
      try {
        $q.localStorage.set("todos", todos);
        $q.notify({
          type: "positive",
          message: `保存成功`,
          timeout: 1,
        });
      } catch (e) {
        // $q.notify({
        //   type:"warning",
        //   message: `保存缓存失败 ${e}`,
        //   timeout:0,
        //   closeBtn:"关闭"
        // });
      }
    }

    function 读取数据s() {
      const 数据s = $q.localStorage.getItem("todos");
      if (typeof 数据s === "object" && 数据s !== null) {
        Object.assign(todos, 数据s);
        // $q.notify({
        //   type:"positive",
        //   message: `成功`,
        //   timeout: 1,
        // });
      }
    }
    onMounted(() => {
      读取数据s();
    });

    //
    watch(todos, () => {
      保存数据s();
    });

    // 如果用户直接关闭浏览器，不会执行他👇
    onUnmounted(() => {
      // 保存数据s()
    });

    return {
      nicetime,
      高亮搜索,
      niceday,
      排序字段,
      倒序,
      排序字段列表,
      关键词,
      add1,
      todos_未完成,
      todos_已完成,
      edit1,
      save1,
      todo,
      todos,
      delete1,
      显示详情,
    };
  },
});
